<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="title" content="LayoutIt! - Bootstrap可视化布局系统">
		<meta name="description" content="LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统">
		<meta name="keywords" content="可视化,布局,系统">
		<title>Bootstrap 可视化布局系统</title>

		<!-- Le styles -->
		<link href="css/bootstrap-combined.min.css" rel="stylesheet">
		<link href="css/layoutit.css" rel="stylesheet">

		<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
	<![endif]-->

		<!-- Fav and touch icons -->
		<link rel="shortcut icon" href="img/favicon.png">

		<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
		<!--[if lt IE 9]>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<![endif]-->
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui.js"></script>
		<script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
		<script type="text/javascript" src="js/jquery.htmlClean.js"></script>
		<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
		<script type="text/javascript" src="ckeditor/config.js"></script>
		<script type="text/javascript" src="js/scripts.js"></script>
	</head>

	<body style="min-height: 660px; cursor: auto;" class="edit">
		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container-fluid">
					<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
					<div class="nav-collapse collapse">
						<ul class="nav" id="menu-layoutit">
							<li class="divider-vertical"></li>
							<li>
								<div class="btn-group" data-toggle="buttons-radio">
									<button type="button" id="edit" class="btn btn-primary active"><i class="icon-edit icon-white"></i>编辑</button>
									<button type="button" class="btn btn-primary" id="devpreview"><i class="icon-eye-close icon-white"></i>布局编辑</button>
									<button type="button" class="btn btn-primary" id="sourcepreview"><i class="icon-eye-open icon-white"></i>预览</button>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-primary" data-target="#downloadModal" rel="/build/downloadModal" role="button" data-toggle="modal"><i class="icon-chevron-down icon-white"></i>下载</button>
								</div>
							</li>
						</ul>
						<ul class="nav pull-right">
							<li>
								<div class="btn-group">
									<span><iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=justjavac&repo=layoutit&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="80px" height="20px"></iframe></span>
									<span><iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=justjavac&repo=layoutit&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="80px" height="20px"></iframe></span>
								</div>
							</li>
						</ul>
					</div>
					<!--/.nav-collapse -->
				</div>
			</div>
		</div>

		<div class="container-fluid">
			<div class="row-fluid">
				<div class="">
					<!--  ------------------------------   左侧栏   ------------------------------------------------   -->
					<div class="sidebar-nav">
						<!-- ++++++++++++++++++++++++++++++ 左侧一个大选项 ++++++++++++++++++++++++++++++++++ -->
						<ul class="nav nav-list accordion-group">
							<li class="nav-header">
								<div class="pull-right popover-info"><i class="icon-question-sign "></i>
									<div class="popover fade right">
										<div class="arrow"></div>
										<h3 class="popover-title">功能</h3>
										<div class="popover-content">说明</a>
										</div>
									</div>
								</div>
								<i class="icon-plus icon-white"></i> 布局设置 </li>
							<li style="display: list-item;" class="rows" id="estRows">

								<div class="lyrow ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
									<div class="preview">
										<input value="6 6" type="text">
									</div>
									<div class="view">
										<div class="row-fluid clearfix">
											<form>
												<div class="span12 column ui-sortable"></div>
											</form>
										</div>
									</div>
								</div>

								<div class="lyrow ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
									<div class="preview">
										<input value="2 6 4" type="text">
									</div>
									<div class="view">
										<div class="row-fluid clearfix">
											<div class="span2 column"></div>
											<div class="span6 column"></div>
											<div class="span4 column"></div>
										</div>
									</div>
								</div>
							</li>
						</ul>
						<ul class="nav nav-list accordion-group">
							<li class="nav-header"><i class="icon-plus icon-white"></i> 基本CSS
								<div class="pull-right popover-info"><i class="icon-question-sign "></i>
									<div class="popover fade right">
										<div class="arrow"></div>
										<h3 class="popover-title">帮助</h3>
										<div class="popover-content">这里提供了一系列基本元素样式，你可以通过区块右上角的编辑按钮修改样式设置。如需了解更多信息，请访问
											<a target="_blank" href="http://twitter.github.io/bootstrap/base-css.html">基本CSS.</a>
										</div>
									</div>
								</div>
							</li>
							<li style="display: none;" class="boxes" id="elmBase">
								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
									<span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">对齐 <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li class="active">
											<a href="#" rel="">默认</a>
										</li>
										<li class="">
											<a href="#" rel="text-left">靠左</a>
										</li>
										<li class="">
											<a href="#" rel="text-center">居中</a>
										</li>
										<li class="">
											<a href="#" rel="text-right">靠右</a>
										</li>
									</ul>
									</span> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">标记 <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li class="active">
											<a href="#" rel="">默认</a>
										</li>
										<li class="">
											<a href="#" rel="muted">禁用</a>
										</li>
										<li class="">
											<a href="#" rel="text-warning">警告</a>
										</li>
										<li class="">
											<a href="#" rel="text-error">错误</a>
										</li>
										<li class="">
											<a href="#" rel="text-info">提示</a>
										</li>
										<li class="">
											<a href="#" rel="text-success">成功</a>
										</li>
									</ul>
									</span>
									</span>
									<div class="preview">标题栏</div>
									<div class="view">
										<h3 contenteditable="true">h3. 这是一套可视化布局系统.</h3>
									</div>
								</div>
								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">对齐 <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li class="active">
											<a href="#" rel="">默认</a>
										</li>
										<li class="">
											<a href="#" rel="text-left">靠左</a>
										</li>
										<li class="">
											<a href="#" rel="text-center">居中</a>
										</li>
										<li class="">
											<a href="#" rel="text-right">靠右</a>
										</li>
									</ul>
									</span> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">标记 <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li class="active">
											<a href="#" rel="">默认</a>
										</li>
										<li class="">
											<a href="#" rel="muted">禁用</a>
										</li>
										<li class="">
											<a href="#" rel="text-warning">警告</a>
										</li>
										<li class="">
											<a href="#" rel="text-error">错误</a>
										</li>
										<li class="">
											<a href="#" rel="text-info">提示</a>
										</li>
										<li class="">
											<a href="#" rel="text-success">成功</a>
										</li>
									</ul>
									</span>
									<a class="btn btn-mini" href="#" rel="lead">Lead</a>
									</span>
									<div class="preview">段落</div>
									<div class="view" contenteditable="true">
										<p><em>Git</em>是一个分布式的版本控制系统，最初由<b>Linus Torvalds</b>编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在Ruby社区中。 </p>
									</div>
								</div>
								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
									<span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
									<div class="preview">地址</div>
									<div class="view">
										<address contenteditable="true">
                <strong>Twitter, Inc.</strong><br>
                795 Folsom Ave, Suite 600<br>
                San Francisco, CA 94107<br>
                <abbr title="Phone">P:</abbr> (123) 456-7890
                </address>
									</div>
								</div>
								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"> <a class="btn btn-mini" href="#" rel="pull-right">右对齐</a> </span>
									<div class="preview">引用块</div>
									<div class="view clearfix">
										<blockquote contenteditable="true">
											<p>github是一个全球化的开源社区.</p>
											<small>关键词 <cite title="Source Title">开源</cite></small> </blockquote>
									</div>
								</div>
								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <a class="btn btn-mini" href="#" rel="unstyled">无样式</a> <a class="btn btn-mini" href="#" rel="inline">嵌入</a> </span>
									<div class="preview">无序列表</div>
									<div class="view">
										<ul contenteditable="true">
											<li>新闻资讯</li>
											<li>体育竞技</li>
											<li>娱乐八卦</li>
											<li>前沿科技</li>
											<li>环球财经</li>
											<li>天气预报</li>
											<li>房产家居</li>
											<li>网络游戏</li>
										</ul>
									</div>
								</div>
								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <a class="btn btn-mini" href="#" rel="unstyled">无样式</a> <a class="btn btn-mini" href="#" rel="inline">嵌入</a> </span>
									<div class="preview">有序列表</div>
									<div class="view">
										<ol contenteditable="true">
											<li>新闻资讯</li>
											<li>体育竞技</li>
											<li>娱乐八卦</li>
											<li>前沿科技</li>
											<li>环球财经</li>
											<li>天气预报</li>
											<li>房产家居</li>
											<li>网络游戏</li>
										</ol>
									</div>
								</div>
								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <a class="btn btn-mini" href="#" rel="dl-horizontal">竖向对齐</a> </span>
									<div class="preview">详细描述</div>
									<div class="view">
										<dl contenteditable="true">
											<dt>Rolex</dt>
											<dd>劳力士创始人为汉斯.威尔斯多夫，1908年他在瑞士将劳力士注册为商标。</dd>
											<dt>Vacheron Constantin</dt>
											<dd>始创于1775年的江诗丹顿已有250年历史，</dd>
											<dd>是世界上历史最悠久、延续时间最长的名表之一。</dd>
											<dt>IWC</dt>
											<dd>创立于1868年的万国表有“机械表专家”之称。</dd>
											<dt>Cartier</dt>
											<dd>卡地亚拥有150多年历史，是法国珠宝金银首饰的制造名家。</dd>
										</dl>
									</div>
								</div>
								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li class="active">
											<a href="#" rel="">默认</a>
										</li>
										<li class="">
											<a href="#" rel="table-striped">条纹</a>
										</li>
										<li class="">
											<a href="#" rel="table-bordered">边框</a>
										</li>
									</ul>
									</span>
									<a class="btn btn-mini" href="#" rel="table-hover">鼠标指示</a>
									<a class="btn btn-mini" href="#" rel="table-condensed">紧凑</a>
									</span>
									<div class="preview">表格</div>
									<div class="view">
										<table class="table" contenteditable="true">
											<thead>
												<tr>
													<th>编号</th>
													<th>产品</th>
													<th>交付时间</th>
													<th>状态</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>1</td>
													<td>TB - Monthly</td>
													<td>01/04/2012</td>
													<td>Default</td>
												</tr>
												<tr class="success">
													<td>1</td>
													<td>TB - Monthly</td>
													<td>01/04/2012</td>
													<td>Approved</td>
												</tr>
												<tr class="error">
													<td>2</td>
													<td>TB - Monthly</td>
													<td>02/04/2012</td>
													<td>Declined</td>
												</tr>
												<tr class="warning">
													<td>3</td>
													<td>TB - Monthly</td>
													<td>03/04/2012</td>
													<td>Pending</td>
												</tr>
												<tr class="info">
													<td>4</td>
													<td>TB - Monthly</td>
													<td>04/04/2012</td>
													<td>Call in to confirm</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>

								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <a class="btn btn-mini" href="#" rel="form-inline">嵌入</a> </span>
									<div class="preview">搜索框</div>
									<div class="view">
										<form class="form-search">
											<input class="input-medium search-query" type="text">
											<button type="submit" class="btn" contenteditable="true">查找</button>
										</form>
									</div>
								</div>
								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"> </span>
									<span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
									<div class="preview">纵向表单</div>
									<div class="view">
										<form class="form-horizontal">
											<div class="control-group">
												<label class="control-label" for="inputEmail" contenteditable="true">邮箱</label>
												<div class="controls">
													<input id="inputEmail" placeholder="Email" type="text">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="inputPassword" contenteditable="true">密码</label>
												<div class="controls">
													<input id="inputPassword" placeholder="Password" type="password">
												</div>
											</div>
											<div class="control-group">
												<div class="controls">
													<label class="checkbox" contenteditable="true">
                        <input type="checkbox">
                        Remember me </label>
													<button type="submit" class="btn" contenteditable="true">登陆</button>
												</div>
											</div>
										</form>
									</div>
								</div>
								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li class="active">
											<a href="#" rel="">默认</a>
										</li>
										<li class="">
											<a href="#" rel="btn-primary">重点</a>
										</li>
										<li class="">
											<a href="#" rel="btn-info">信息</a>
										</li>
										<li class="">
											<a href="#" rel="btn-success">成功</a>
										</li>
										<li class="">
											<a href="#" rel="btn-warning">提醒</a>
										</li>
										<li class="">
											<a href="#" rel="btn-danger">危险</a>
										</li>
										<li class="">
											<a href="#" rel="btn-inverse">反转</a>
										</li>
										<li class="">
											<a href="#" rel="btn-link">链接</a>
										</li>
									</ul>
									</span> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">尺寸 <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li class="">
											<a href="#" rel="btn-large">大</a>
										</li>
										<li class="active">
											<a href="#" rel="">中</a>
										</li>
										<li class="">
											<a href="#" rel="btn-small666">小</a>
										</li>
										<li class="">
											<a href="#" rel="btn-mini">微型</a>
										</li>
									</ul>
									</span>
									<a class="btn btn-mini" href="#" rel="btn-block">通栏</a>
									<a class="btn btn-mini" href="#" rel="disabled">禁用</a>
									</span>
									<div class="preview">按钮</div>
									<div class="view">
										<button class="btn" type="button" contenteditable="true">按钮</button>
									</div>
								</div>
								<div class="box box-element ui-draggable">
									<a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li class="active">
											<a href="#" rel="">默认</a>
										</li>
										<li class="">
											<a href="#" rel="img-rounded">圆角</a>
										</li>
										<li class="">
											<a href="#" rel="img-circle">圆圈</a>
										</li>
										<li class="">
											<a href="#" rel="img-polaroid">相框</a>
										</li>
									</ul>
									</span>
									</span>
									<div class="preview">图片</div>
									<div class="view"> <img alt="140x140" src="img/a.jpg"> </div>
								</div>
							</li>
						</ul>

					</div>
				</div>
				<!--/span-->
				<div class="demo ui-sortable" style="min-height: 304px; ">

				</div>
				<!-- end demo -->
				<!--/span-->
				<div id="download-layout">
					<div class="container-fluid"></div>
				</div>
			</div>
			<!--/row-->
		</div>

		<!--/.fluid-container-->
		<div class="modal hide fade" role="dialog" id="editorModal">
			<div class="modal-header">
				<a class="close" data-dismiss="modal">×</a>
				<h3>编辑</h3>
			</div>
			<div class="modal-body">
				<p>
					<textarea id="contenteditor"></textarea>
				</p>
			</div>
			<div class="modal-footer">
				<a id="savecontent" class="btn btn-primary" data-dismiss="modal">保存</a>
				<a class="btn" data-dismiss="modal">关闭</a>
			</div>
		</div>
		<div class="modal hide fade" role="dialog" id="downloadModal">
			<div class="modal-header">
				<a class="close" data-dismiss="modal">×</a>
				<h3>下载</h3>
			</div>
			<div class="modal-body">
				<p>已在下面生成干净的HTML</p>
				<div class="btn-group">
					<button type="button" id="fluidPage" class="active btn btn-info"><i class="icon-fullscreen icon-white"></i> 自适应宽度</button>
					<button type="button" class="btn btn-info" id="fixedPage"><i class="icon-screenshot icon-white"></i> 固定宽度</button>
				</div>
				<br>
				<br>
				<p>
					<textarea></textarea>
				</p>
			</div>
			<div class="modal-footer">
				<a class="btn" data-dismiss="modal">关闭</a>
			</div>
		</div>

	</body>

</html>